import 'package:flutter/material.dart';
import 'package:flutter_trip/model/common_model.dart';
import 'package:flutter_trip/model/grid_nav_model.dart';
import 'package:flutter_trip/widget/webview.dart';

///网格布局
class GridNav2 extends StatelessWidget {
  //构造方法中 传入当前数据源
  const GridNav2({Key? key, required this.gridNavModel}) : super(key: key);

  //数据源
  final GridNavModel gridNavModel;

  @override
  Widget build(BuildContext context) {
    return PhysicalModel(
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(6),
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: _gridNavItems(context),
      ),
    );
  }

  //1.生成纵向3个列表
  _gridNavItems(BuildContext context) {
    //定义集合
    List<Widget> items = [];
    if (gridNavModel == null) return items;
    if (gridNavModel.hotel != null) {
      items.add(_gridNavItem(context, gridNavModel.hotel , true));
    }
    if (gridNavModel.flight != null) {
      items.add(_gridNavItem(context, gridNavModel.flight , false));
    }
    if (gridNavModel.travel != null) {
      items.add(_gridNavItem(context, gridNavModel.travel , false));
    }
    return items;
  }

  //2.生成左中右三块布局
  _gridNavItem(BuildContext context, GridNavItem gridNavItem , bool isFirst) {
    List<Widget> items = [];
    items.add(_mainItem(context, gridNavItem.mainItem));
    items.add(_doubleItem(context, gridNavItem.item1 , gridNavItem.item2));
    items.add(_doubleItem(context, gridNavItem.item3, gridNavItem.item4));
    List<Widget> expendItems=[];
    items.forEach((element) {
        expendItems.add(Expanded(child: element , flex: 1,));
    });
    Color startColor = Color(int.parse('0xff'+gridNavItem.startColor));
    Color endColor = Color(int.parse('0xff'+gridNavItem.endColor));
    return Container(
      height: 88,
      margin: isFirst?null: EdgeInsets.only(top: 3),
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [startColor , endColor])
      ),
      child: Row(
        children: expendItems,
      ),
    );
  }

  //3.生成左边布局
  _mainItem(BuildContext context, CommonModel item) {
    return _wrapGesture(context, Stack(
      alignment: AlignmentDirectional.topCenter,
      children: [
        Image.network(
          item.icon!,
          fit: BoxFit.contain,
          height: 88,
          width: 121,
          alignment: AlignmentDirectional.bottomEnd,
        ),
        Container(
          margin: EdgeInsets.only(top: 11),
          child: Text(
            item.title!,
            style: TextStyle(fontSize: 14, color: Colors.white),
          ),
        )
      ],
    ), item);
  }

  //4.生成右边 上下的盒子
  _doubleItem(BuildContext context, CommonModel topItem,
      CommonModel bottomItem) {
    return Column(
      children: [
        Expanded(
            child: _item(context, topItem, true)
        ),
        Expanded(
            child: _item(context, bottomItem, false)
        )
      ],
    );
  }

  _item(BuildContext context, CommonModel item, bool first) {
    BorderSide borderSide = BorderSide(width: 0.8 , color: Colors.white);
    return _wrapGesture(context, FractionallySizedBox(
        widthFactor: 1,
        child: Container(
          decoration: BoxDecoration(
              border: Border(
                  left: borderSide,
                  bottom: first?borderSide :BorderSide.none
              )
          ),
          child: Center(
            child: Text(
              item.title!,
              style: TextStyle(fontSize: 14, color: Colors.white),
              textAlign: TextAlign.center,
            ),
          ),
        )
    ), item);
  }
  _wrapGesture(BuildContext context , Widget widget , CommonModel model){
    return GestureDetector(
      onTap: (){
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => HiWebView(
                  url: model.url,
                  statusBarColor: model.statusBarColor,
                  hideAppBar: model.hideAppBar,
                )));
      },
      child: widget,
    );
  }
}
